বক্স মডেল (Box Model) কী?
বক্স মডেল হল ওয়েব ডিজাইন এবং লেআউটের একটি মৌলিক ধারণা, যা ওয়েব পেজের উপাদান (যেমন, ডিভ, প্যারাগ্রাফ, ইমেজ) কিভাবে স্ক্রীনে প্রদর্শিত হয়, তা নির্ধারণ করে। এটি ওয়েব পেজের প্রতিটি HTML এলিমেন্টকে একটি আয়তাকার বক্স হিসেবে কল্পনা করে। প্রতিটি বক্সের চারটি প্রধান অংশ থাকে:
- কন্টেন্ট: এটি বক্সের কেন্দ্রের অংশ, যেখানে টেক্সট, চিত্র বা অন্য কোনো উপাদান থাকে।
- প্যাডিং: কন্টেন্ট এবং বর্ডারের মধ্যে ব্যবধান। প্যাডিং ব্যবহার করে কন্টেন্টের চারপাশে স্পেস তৈরি করা হয়।
- বর্ডার: প্যাডিং এবং মার্জিনের মধ্যে একটি সীমানা (border) হিসেবে কাজ করে। এটি বিভিন্ন ধরনের (যেমন, সলিড, ড্যাশড, ডটেড) এবং প্রস্থ (width) থাকতে পারে।
- মার্জিন: বর্ডারের বাইরে এবং অন্যান্য উপাদানের মধ্যে ব্যবধান। এটি বিভিন্ন উপাদানগুলির মধ্যে স্পেস তৈরি করতে সাহায্য করে।
এই চারটি অংশের সম্মিলন থেকেই একটি এলিমেন্টের মোট আয়তন নির্ধারণ হয়।
বক্স মডেলের অংশ
১. কন্টেন্ট (Content)
কন্টেন্ট হল সেই এলাকা যেখানে মূল উপাদানটি প্রদর্শিত হয়, যেমন টেক্সট, চিত্র বা অন্য কিছু। এটি বক্সের কেন্দ্রের অংশ এবং এর আকার CSS প্রোপার্টি (যেমন width এবং height) দ্বারা নিয়ন্ত্রিত হয়।
২. প্যাডিং (Padding)
প্যাডিং হলো কন্টেন্ট এবং বর্ডারের মধ্যে ব্যবধান। এটি উপাদানের ভিতরে স্পেস তৈরি করে, যা কন্টেন্টকে বর্ডার থেকে আলাদা রাখে। প্যাডিং ব্যবহারে উপাদানটি বেশি শীতল বা নরম দেখায়।
padding: 20px;
এই ক্ষেত্রে, প্যাডিং এর চারপাশে ২০ পিক্সেল ব্যবধান তৈরি করা হবে।
৩. বর্ডার (Border)
বর্ডার হল প্যাডিং এবং মার্জিনের মধ্যে একটি সীমানা। এটি প্যাডিং এবং কন্টেন্টের চারপাশে একটি দৃশ্যমান রেখা তৈরি করে। বর্ডারটির প্রস্থ, রঙ এবং ধরণ নির্ধারণ করা যায়।
border: 2px solid #000;
এখানে, বর্ডারের প্রস্থ ২ পিক্সেল, ধরণ সলিড (solid), এবং রঙ কালো (#000) নির্ধারণ করা হয়েছে।
৪. মার্জিন (Margin)
মার্জিন হলো বর্ডারের বাইরে ব্যবধান, যা উপাদানগুলির মধ্যে স্পেস তৈরি করতে ব্যবহৃত হয়। এটি অন্যান্য উপাদানের সাথে দূরত্ব রাখতে সহায়তা করে এবং ওয়েব পেজে একটি পরিস্কার লেআউট তৈরি করতে সাহায্য করে।
margin: 10px;
এটি প্রতিটি দিক থেকে ১০ পিক্সেল মার্জিন তৈরি করবে।
বক্স মডেল এবং box-sizing প্রোপার্টি
CSS-এ box-sizing প্রোপার্টি বক্স মডেল কীভাবে কাজ করবে তা নির্ধারণ করে। এর দুটি প্রধান মান রয়েছে:
১. content-box (ডিফল্ট)
এটি বক্স মডেলের ডিফল্ট মান, যেখানে কন্টেন্টের আকার নির্ধারণ করা হয় width এবং height দ্বারা। প্যাডিং এবং বর্ডার এই আকারের বাইরে যুক্ত হবে, অর্থাৎ কন্টেন্টের প্রকৃত আকারের সাথে প্যাডিং এবং বর্ডার যোগ হবে।
box-sizing: content-box;
২. border-box
এটি বক্সের আকার নির্ধারণে কন্টেন্ট, প্যাডিং এবং বর্ডার সহ মোট আকারে কাজ করে। এর মানে হল যে width এবং height ডিক্লেয়ার করার সময় প্যাডিং এবং বর্ডারও অন্তর্ভুক্ত হবে।
box-sizing: border-box;
এটি অনেক ডেভেলপারদের জন্য সুবিধাজনক, কারণ এতে প্যাডিং এবং বর্ডারের কারণে এলিমেন্টের আকার পরিবর্তিত হবে না।
বক্স মডেল এবং লেআউট ডিজাইন
বক্স মডেল ওয়েব লেআউট ডিজাইনে অত্যন্ত গুরুত্বপূর্ণ। এটি ব্যবহার করে আপনি ওয়েব পেজের বিভিন্ন উপাদানগুলির অবস্থান, আকার এবং ব্যবধান নিয়ন্ত্রণ করতে পারেন।
১. ফ্লেক্সবক্স (Flexbox)
ফ্লেক্সবক্স একটি লেআউট মডেল যা বক্স মডেলের উপর ভিত্তি করে কাজ করে। এটি উপাদানগুলির মধ্যে সমান বা নির্দিষ্ট স্পেস বিতরণ করতে সাহায্য করে এবং উপাদানগুলিকে ভরাট এবং অ্যালাইন করতে সাহায্য করে।
display: flex;
২. গ্রিড লেআউট (Grid Layout)
CSS গ্রিড লেআউটও বক্স মডেলকে কাজে লাগিয়ে উপাদানগুলির অবস্থান এবং আকার নির্ধারণ করতে সাহায্য করে। এটি আরও জটিল এবং স্পেসিফিক লেআউট তৈরি করতে ব্যবহৃত হয়।
display: grid;
৩. মাল্টিকলাম্ন লেআউট (Multicolumn Layout)
মাল্টিকলাম্ন লেআউট ব্যবহার করে আপনি একাধিক কলামে কন্টেন্ট প্রদর্শন করতে পারেন, এবং বক্স মডেল ব্যবহার করে প্রতিটি কলামের মধ্যে ব্যবধান নিয়ন্ত্রণ করতে পারেন।
সার্বিক উপসংহার
বক্স মডেল ওয়েব ডিজাইনের একটি মৌলিক এবং অত্যন্ত গুরুত্বপূর্ণ ধারণা। এটি মার্জিন, প্যাডিং, বর্ডার এবং কন্টেন্টের মাধ্যমে উপাদানের আকার, অবস্থান এবং ব্যবধান নির্ধারণ করে। ওয়েব ডেভেলপমেন্টে সঠিকভাবে বক্স মডেল ব্যবহার করলে আপনি সুন্দর এবং সঠিকভাবে সাজানো ওয়েব পেজ ডিজাইন করতে পারবেন। box-sizing প্রোপার্টির ব্যবহার আপনার ডিজাইনের জটিলতাকে সহজ করতে সাহায্য করে এবং আপনাকে আরও নিয়ন্ত্রিত লেআউট তৈরি করতে সহায়তা করে।
Read more
